<template>
  <div class="sorce-select-wrapper">
    <div class="sorce-select-title">
      <span>模型软件</span>
      <div class="software-select-btn" @click.stop="handleChoose">选择软件</div>
    </div>
    <div class="sorce-select-bottom">
      <div v-if="modelDetail.softwareName == ''">
        <el-empty description="暂无数据" :image-size="45"></el-empty>
      </div>
      <template v-else>
        <el-descriptions
          title=""
          :column="2"
          :size="size"
          border
          class="sorce-select-des"
        >
          <el-descriptions-item>
            <template slot="label">
              <svg-icon icon-class="software" />
              软件名称
            </template>
            {{ modelDetail.softwareName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <svg-icon icon-class="version" />
              版本
            </template>
            {{ modelDetail.softwareVersion }}
          </el-descriptions-item>
          <template v-if="mainRow.rjlx == 0">
            <el-descriptions-item>
              <template slot="label">
                <svg-icon icon-class="simulation" />
                模拟器名称
              </template>
              {{ modelDetail.simulatorName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <svg-icon icon-class="tcp" />
                Tcp端口
              </template>
              {{ modelDetail.tcpPort }}
            </el-descriptions-item>
          </template>
        </el-descriptions>
        <i
          class="el-icon-delete"
          style="color: red; cursor: pointer"
          @click="removeSource"
        ></i>
      </template>
    </div>
    <!-- <el-card :body-style="{ height: '150px' }" shadow="hover">
      <div slot="header">
        <span>模型软件</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleChoose"
          >选择软件</el-button
        >
      </div>
      <div v-if="modelDetail.softwareName == ''">
        <el-empty description="暂无数据" :image-size="45"></el-empty>
      </div>
      <div v-else class="souce_name">
        <div
          style="
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap;
            flex: 2;
          "
        >
          <span style="width: 50%"
            >软件名称：{{ modelDetail.softwareName }}</span
          >
          <span style="width: 50%"
            >版本：{{ modelDetail.softwareVersion }}</span
          >
          <span style="width: 50%"
            >模拟器名称：{{ modelDetail.simulatorName }}</span
          >
          <span style="width: 50%">Tcp端口：{{ modelDetail.tcpPort }}</span>
        </div>
        <el-button type="text" style="color: red" @click="removeSource"
          >删除</el-button
        >
      </div>
     </el-card> -->
    <el-dialog
      title="选择模型软件"
      :visible.sync="modelVisible"
      width="75%"
      append-to-body
      :before-close="handleModelClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-row :gutter="10" class="mb8" style="float: right">
        <el-col :span="1.5">
          <el-button type="primary" size="medium" @click="modelConfirm"
            >确 定</el-button
          >
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        border
        :data="softwareList"
        row-key="trialRowKey"
        lazy
        :load="loadMethod"
        :tree-props="{ hasChildren: 'hashHistory' }"
        @row-click="singleElection"
        style="min-height: 450px"
      >
        <el-table-column align="left" width="55" type="index">
          <template slot-scope="scope">
            <el-radio
              v-if="!scope.row.hashHistory"
              :label="scope.row.id"
              v-model="templateSelection"
            >
              <i></i>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          label="软件名称"
          align="left"
          prop="softwareName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="软件制作时间"
          align="left"
          prop="softwareCreateTime"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.softwareCreateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="软件制作人"
          align="left"
          prop="softwareCreater"
        />
        <el-table-column
          label="版本"
          align="left"
          prop="softwareVersion"
        ></el-table-column>
      </el-table>
      <pagination
        v-show="softTotal > 0"
        :total="softTotal"
        :page.sync="softQueryParams.pageNum"
        :limit.sync="softQueryParams.pageSize"
        @pagination="softGetList"
      />
    </el-dialog>

    <el-dialog
      title="模拟器信息"
      :visible.sync="infoVisible"
      width="50%"
      append-to-body
      :before-close="infoClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        size="small"
        label-width="150px"
      >
        <el-form-item label="模拟器名称" prop="simulatorName">
          <el-input
            v-model="form.simulatorName"
            placeholder="请填写"
            @blur="onBsp($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="模拟器描述" prop="simulatorDesc">
          <el-input
            v-model="form.simulatorDesc"
            type="textarea"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="TCP通讯端口" prop="tcpPort">
          <el-input v-model="form.tcpPort" placeholder="请填写"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="infoClose">取 消</el-button>
        <el-button type="primary" @click="confirmInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  lazyLoadHistoryChildren,
  getDistinctName,
} from "@/api/resource/sever-mange";
import { listSoftwate } from "@/api/resource/modelSoftware.js";
export default {
  props: {
    mainRow: Object,
  },
  data() {
    return {
      // 信息弹窗
      infoVisible: false,
      // 弹窗显示
      modelVisible: false,
      modelDetail: {
        softwareName: "",
      },
      templateSelection: "",
      // 遮罩层
      loading: false,
      softwareList: [],
      softTotal: 0,
      softQueryParams: {
        pageNum: 1,
        pageSize: 10,
        softwareName: void 0,
        softwareCreater: void 0,
        type: void 0,
        auto: "1",
        softwareType: 0,
      },
      form: {
        simulatorName: "",
        simulatorDesc: "",
        tcpPort: "",
      },
      rules: {
        simulatorName: [
          { required: true, message: "模拟器名称不能为空", trigger: "blur" },
        ],
        simulatorDesc: [
          { required: true, message: "模拟器名称不能为空", trigger: "blur" },
        ],
        tcpPort: [
          { required: true, message: "TCP通讯端口不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    onBsp(event) {
      getDistinctName({ softwareName: event.target.form[0].value }).then(
        (res) => {
          if (res.data) {
            this.$message.error("名字已重复");
          }
        }
      );
    },
    softGetList() {
      this.loading = true;
      // this.softQueryParams.type = this.mainRow.skType
      this.softQueryParams.ws = this.mainRow.ws;
      this.softQueryParams.auto = "1";
      this.softQueryParams.type = this.mainRow.os;
      this.softQueryParams.softwareType = this.mainRow.rjlx;
      listSoftwate(this.addDateRange(this.softQueryParams)).then((response) => {
        this.templateSelection = "";
        this.softwareList = response.rows;
        this.softTotal = response.total;
        this.loading = false;
      });
    },
    handleChoose() {
      this.modelVisible = true;
      this.softGetList();
    },
    removeSource() {
      this.modelDetail.softwareName = "";
      this.$emit("removeModel");
    },
    handleModelClose() {
      this.modelVisible = false;
      this.templateSelection = "";
      this.modelDetail.softwareName = "";
    },
    modelConfirm() {
      if (this.templateSelection) {
        // 判断软件类型
        if (this.mainRow.rjlx == 0) {
          this.infoVisible = true;
          this.$nextTick(() => {
            this.$refs.form.clearValidate([
              "simulatorName",
              "simulatorDesc",
              "tcpPort",
            ]);
          });
        } else {
          console.log("modelDetail::::::::", this.modelDetail);
          this.$emit("ok", this.modelDetail);
          this.modelVisible = false;
          this.templateSelection = "";
        }
      } else {
        this.$message.warning("请选择模型软件");
      }
    },
    infoClose() {
      this.form = {};
      this.infoVisible = false;
    },
    // 信息弹窗确定
    confirmInfo() {
      this.$refs.form.validate((val) => {
        if (val) {
          getDistinctName({ softwareName: this.form.simulatorName }).then(
            (res) => {
              if (res.data) {
                this.$message.error("名字已重复");
              } else {
                this.modelDetail.simulatorName = this.form.simulatorName;
                this.modelDetail.simulatorDesc = this.form.simulatorDesc;
                this.modelDetail.tcpPort = this.form.tcpPort;
                this.infoClose();
                console.log("modelDetail::::::::", this.modelDetail);
                this.$emit("ok", this.modelDetail);
                this.modelVisible = false;
                this.templateSelection = "";
              }
            }
          );
        }
      });
    },
    singleElection(row) {
      console.log("dafasfdfasfdsaf", row);
      this.modelDetail = row;
      if (!row.hashHistory) {
        this.templateSelection = row.id;
      }
    },
    // 部署对话框树形表格懒加载
    loadMethod(tree, treeNode, resolve) {
      lazyLoadHistoryChildren(tree.softwareId).then((res) => {
        resolve(
          res.data.map((a) => {
            const {
              id,
              historyName,
              historyCreateTime,
              historyCreater,
              historyVersion,
              trialRowKey,
              historySoftwareFile,
              historyVarScriptFile,
              historySoftwareInsFile,
              historyRunScriptFile,
              historyStopScriptFile,
              historySoftwareUninsFile,
              softwareId,
              historySoftwareDesc,
            } = a;
            return {
              id,
              softwareName: historyName,
              softwareCreateTime: historyCreateTime,
              softwareCreater: historyCreater,
              softwareVersion: historyVersion,
              softwareId: softwareId,
              trialRowKey,
              historySoftwareFile,
              historyVarScriptFile,
              historySoftwareInsFile,
              historyRunScriptFile,
              historyStopScriptFile,
              historySoftwareUninsFile,
              historySoftwareDesc,
            };
          })
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sorce-select-wrapper {
  border: 1px solid #e5e5e5;
  margin-bottom: 20px;
  .sorce-select-title {
    padding: 14px 14px 14px 30px;
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      position: relative;
      padding-left: 12px;
      font-size: 18px;
      color: #333333;
      &::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 98%;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        background: #1486f6;
      }
    }
    .software-select-btn {
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .sorce-select-bottom {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    .sorce-select-des {
      flex: 1;
      overflow: hidden;
      margin-right: 24px;
      ::v-deep .el-descriptions-item__label {
        width: 110px;
      }
    }
  }
}
</style>
